<template>
	<div class="judge-con">
		<div class="nav-bar">
			<button type="button" class="tab is-active">{{matchData.lockId}}/{{matchData.matchCode}}</button>
			<button type="button" class="tab is-active" @click="submitScore">提 交</button>
		</div>
		<div class="judge-title">
			<small>{{matchData.matchName}} / {{matchData.matchCode}}</small>
		</div>
		<div class="point-con">
			<div class="l-con">
				<div class="point-text" v-bind:class="{'isActive':setActive}" @click="setAccuracy">
					<div class="point-title">
						<span class="text">准确度</span>
					</div>
					<input type="number" id="accuracy" name="accuracy" class="point-num" min="0" max="4" v-model="accuracy">
				</div>
			</div>
			<div class="r-con">
				<div class="point-text" v-bind:class="{'isActive':!setActive}" @click="setExpressiveness">
					<div class="point-title">
						<span class="text">表现力</span>
					</div>
					<input type="number" id="expressiveness" name="expressiveness" class="point-num" min="0" max="6" v-model="expressiveness">
				</div>
			</div>
		</div>
		<div class="btn-con">
			<!-- <button type="button" class="btn" data-type="accuracy" data-score="-0.1" style="background-color: #4953e9;">-0.1
			</button> -->
			<button type="button" class="btn" data-type="accuracy" @click="setScore('-0.1')" style="color: #000;font-weight:bold">-0.1</button>
			<!-- <button type="button" class="btn" data-type="expressiveness" data-score="-0.1" style="background-color: #ed717c;color: yellow;">-0.1
			</button> -->
			<!-- <button type="button" class="btn" data-type="accuracy" data-score="-0.3" style="background-color: #7795ff;">-0.3
			</button> -->
			<button type="button" class="btn" data-type="expressiveness" @click="setScore('-0.3')" style="color: #000;font-weight:bold">-0.3</button>
			<button type="button" class="btn" data-type="expressiveness" @click="setScore('+0.1')" style="background-color: yellow;color: #000;font-weight:bold">+0.1</button>
		</div>
		<!-- <div class="btn-bar-b">
			<button type="button" class="btn btn-reload">获取场次</button>
			<button type="button" class="btn btn-submit">提交评分</button>
		</div> -->
	</div>
</template>
<script>
import { getLockMatch } from '@/api/matchSchedule'
import { saveMatchScore } from '@/api/matchScore'
export default {
  data() {
    return {
      accuracy: '4.0',
      expressiveness: '6.0',
      setActive: true,
      matchData: null,
      currentMatch: null
    }
  },
  created() {
    this.getLockMatch()
  },
  methods: {
    setScore(arg) {
      if (this.setActive) {
        switch (arg) {
          case '-0.3':
            this.accuracy -= 0.3
            break
          case '-0.1':
            this.accuracy -= 0.1
            break
          case '+0.1':
            this.accuracy = parseFloat(this.accuracy) + 0.1
            break
        }
        if (this.accuracy < 0) {
          this.accuracy = 0
        }
        if (this.accuracy > 4) {
          this.accuracy = 4
        }
        this.accuracy = this.accuracy.toFixed(1)
      } else {
        switch (arg) {
          case '-0.3':
            this.expressiveness -= 0.3
            break
          case '-0.1':
            this.expressiveness -= 0.1
            break
          case '+0.1':
            this.expressiveness = parseFloat(this.expressiveness) + 0.1
            break
        }
        if (this.expressiveness < 0) {
          this.expressiveness = 0
        }
        if (this.expressiveness > 6) {
          this.expressiveness = 6
        }
        this.expressiveness = this.expressiveness.toFixed(1)
      }
    },
    getLockMatch() {
      var obj = {
        matchId: this.$store.state.user.matchReferee.matchId,
        matchAdminId: this.$store.state.user.matchReferee.matchAdminId
      }
      getLockMatch(obj).then(res => {
        this.matchData = res.data.data
        // console.log(this.matchDataList)
        // this.currentMatch = this.matchDataList
      })
    },
    submitScore() {
      var obj = {
        matchScheduleId: this.matchData.id,
        referee: this.$store.state.user.matchReferee.refereeId,
        refereeId: this.$store.state.user.matchReferee.refereeId,
        expressiveness: parseFloat(this.expressiveness),
        accuracy: parseFloat(this.accuracy),
        winner: 1
      }
      saveMatchScore(obj).then(res => {
        console.log(res)
      })
    },
    setAccuracy() {
      this.setActive = true
    },
    setExpressiveness() {
      this.setActive = false
    }
  }
}
</script>
<style scoped>
.judge-con {
            /*max-width: 750px;*/
            margin: 0 auto;
            height: 100%;
            /*background-color: #fff;*/
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            /*    -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;*/
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .nav-bar {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        .nav-bar .tab {
            -webkit-box-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            align-items: center;
            height: 40px;
            width: 33%;
            font-size: 16px;
            margin-bottom: 0;
            border-radius: 0;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
            background: #f2f5f6; /* Old browsers */
            background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc', GradientType=0); /* IE6-9 */
            color: #333;
        }

        .nav-bar .tab.is-active {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+13,0a0a0a+42,4e4e4e+93,4e4e4e+93 */
            background: #959595; /* Old browsers */
            background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 13%, #0a0a0a 42%, #4e4e4e 93%, #4e4e4e 93%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #959595 0%, #0d0d0d 13%, #0a0a0a 42%, #4e4e4e 93%, #4e4e4e 93%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #959595 0%, #0d0d0d 13%, #0a0a0a 42%, #4e4e4e 93%, #4e4e4e 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#959595', endColorstr='#4e4e4e', GradientType=0); /* IE6-9 */
            color: #fff;
            font-weight: bold;
        }

        .judge-title {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            /*height: 40px;*/
            padding: 20px;
            font-size: 20px;
            color: #fff;
        }

        .win-info {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            align-items: center;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38419e+0,7795ff+50,ed717c+51,931f26+100 */
            background: #38419e; /* Old browsers */
            background: -moz-linear-gradient(left, #38419e 0%, #7795ff 50%, #ed717c 51%, #931f26 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #38419e 0%, #7795ff 50%, #ed717c 51%, #931f26 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #38419e 0%, #7795ff 50%, #ed717c 51%, #931f26 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#38419e', endColorstr='#931f26', GradientType=1); /* IE6-9 */
            padding: 20px;
            /*font-size: 20px;*/
        }

        .win-info .text {
            flex: 0 0 auto;
            font-size: 20px;
            padding: 10px 30px;
            background-color: #000;
            color: #ff0000;
            font-weight: bold;
        }

        .point-con {
            margin-top: 10px;
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            width: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .point-con .l-con, .point-con .r-con {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            box-shadow: 0 0px 10px 5px rgba(0, 0, 0, 0.3) inset;
            border-radius: 10px;
            width: 48%;
        }

        .l-con {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38419e+0,7795ff+50,ed717c+51,931f26+100 */
            background: #38419e; /* Old browsers */
            background: -moz-linear-gradient(left, #38419e 0%, #7795ff 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #38419e 0%, #7795ff 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #38419e 0%, #7795ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#38419e', endColorstr='#7795ff', GradientType=1); /* IE6-9 */
        }

        .r-con {
            margin-left: 10px;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38419e+0,7795ff+50,ed717c+51,931f26+100 */
            background: #931f26; /* Old browsers */
            background: -moz-linear-gradient(left, #ed717c 0%, #931f26 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #ed717c 0%, #931f26 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #ed717c 0%, #931f26 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed717c', endColorstr='#931f26', GradientType=1); /* IE6-9 */
        }

        .point-text {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }
				.point-text.isActive{
					    border: 2px solid #FC0;
    border-radius: 6px;
    box-shadow: 0 0 8px #FC0;
    -moz-box-shadow: 0 0 8px #FC0;
    -webkit-box-shadow: 0 0 6px #FC0;
				}
        .point-title {
            flex: 0 0 auto;
            height: 40px;
            position: relative;
        }

        .point-title .text {
            position: absolute;
            height: 100%;
            left: 10px;
            right: 10px;
            top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 22px;
            text-align: center;
            /*font-weight: bold;*/
        }

        .point-num {
            -webkit-box-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            text-align: center;
            font-size: 60px;
            line-height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-bottom: 30px;
            font-weight: bold;
            background: none;
            border: 0;
            color: inherit;
            padding: 0;
            width: 100%;
        }

        .l-con .point-text {
            color: #fff;
        }

        .r-con .point-text {
            color: yellow;
        }

        .btn-con {
            -webkit-box-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap-reverse;
            -moz-flex-wrap: wrap-reverse;
            -ms-flex-wrap: wrap-reverse;
            -o-flex-wrap: wrap-reverse;
            flex-wrap:wrap-reverse;
            margin-top: 10px;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-around;
            -ms-flex-pack: justify;
            justify-content: space-around;
        }

        .btn-con .btn {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            /*border: 1px solid lightblue;*/
            /*background: lavender;*/
            width: 40%;
            font-size: 30px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            border-radius: 5px;
            color: #fff;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-bottom: 10px;
        }

        .btn-con .btn:active {
					filter:brightness(1.5);
          -webkit-filter: brightness(1.5);
        }

        .btn-bar-b {
            flex: 0 0 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        .btn-bar-b .btn-reload, .btn-bar-b .btn-submit {
            -webkit-box-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            width: 50%;
            height: 50px;
            font-size: 18px;
            margin-bottom: 0;
            border-radius: 0;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
            background: #f2f5f6; /* Old browsers */
            background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc', GradientType=0); /* IE6-9 */
            color: #333;
        }

        .btn-submit {
            border-left: 1px solid darkgray;
        }
</style>

